<template>
  <div style="background:#022d52;">
    <header class="head">
      <span>测试项目</span>
      <span>{{time|formatDate}}</span>
    </header>
    <section class="pcub">
      <div class="left">2</div>
      <div class="center">
        <div>
          <bmap :height="'500px'"></bmap>
        </div>
        <div>
          <div id="myChart1" style="width: 100%;height: 400px"></div>
        </div>
      </div>
      <div class="right">
        <div id="myChart2" style="width: 100%;height: 400px"></div>
        <div id="myChart3" style="width: 100%;height: 400px"></div>
      </div>
    </section>
  </div>
</template>

<script>
let timer = null;
import bmap from "@/components/bmap.vue";
import { formatDate } from "@/utils/common.js";
export default {
  components: { bmap },
  name: "lose",
  data() {
    return {
      time: new Date().getTime()
    };
  },
  filters: {
    formatDate(time) {
      var date = new Date(time);
      return formatDate(date, "yyyy-MM-dd hh:mm:ss");
    }
  },
  mounted() {
    timer = setInterval(() => {
      let date = new Date();
      this.time = new Date().getTime();
      console.log(this.time);
    }, 1000);
    this.drawBar();
    this.drawPie();
    this.drawline();
  },
  methods: {
    drawline(){
      let myChart = this.$echarts.init(document.getElementById("myChart3"));
        myChart.setOption({
          xAxis: {
              type: 'category',
              data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          yAxis: {
              type: 'value'
          },
          series: [{
              data: [820, 932, 901, 934, 1290, 1330, 1320],
              type: 'line'
          }]
      })
    },
    drawPie(){
      let myChart = this.$echarts.init(document.getElementById("myChart2"));
        myChart.setOption({
        title : {
            text: '某站点用户访问来源',
            subtext: '纯属虚构',
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
        },
        series : [
            {
                name: '访问来源',
                type: 'pie',
                radius : '55%',
                center: ['50%', '60%'],
                data:[
                    {value:335, name:'直接访问'},
                    {value:310, name:'邮件营销'},
                    {value:234, name:'联盟广告'},
                    {value:135, name:'视频广告'},
                    {value:1548, name:'搜索引擎'}
                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
      })
    },
    drawBar(){
      let myChart = this.$echarts.init(document.getElementById("myChart1"));
        myChart.setOption({
          color: ['#3398DB'],
          tooltip : {
              trigger: 'axis',
              axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                  type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
              }
          },
          grid: {
              left: '0',
              right: '0',
              bottom: '3%',
              containLabel: true
          },
          xAxis : [
              {
                  type : 'category',
                  data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                  axisTick: {
                      alignWithLabel: true
                  }
              }
          ],
          yAxis : [
              {
                  type : 'value'
              }
          ],
          series : [
              {
                  name:'直接访问',
                  type:'bar',
                  barWidth: '40%',
                  data:[10, 52, 200, 334, 390, 330, 220]
              }
          ]
      })
    }
  },
  beforeDestory() {
    clearInterval(timer);
  }
};
</script>

<style scoped lang="less">
.head {
  height: 80px;
  line-height: 80px;
  text-align: center;
  font-size: 30px;
  color: #87ceeb;
}
.left {
  width: 25%;
}
.center {
  width: 50%;
}
.right {
  width: 25%;
}
</style>
